<template>
<div class="custorm-poster-list views-container">
    <el-dialog @close="posterActiveNum = -1" :visible.sync="dialogVisibleImg" width="33%" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">创建海报</span>
            </div>
            <div class="wlm-dialog-content flex-row flex-align-c flex-justify-c" style="flex-wrap: wrap;">
              <!-- @click="posterActiveNum=(index)" -->
                <div class="poster-item" v-for="(item, index) in itemList" :key="index" v-bind:style="{ background: item.color }">
                    <!-- <div class="active" v-if="posterActiveNum==(index)"></div> -->
                    <div class="content"><img :src="getPath(item.img)" alt="">
                      <!-- <i v-if="posterActiveNum==(index)" class="el-icon-circle-check"></!-->
                    </div>
                    <p class="title">{{item.title}}</p>
                    <p class="explain">
                      <el-button @click="posterActiveNum=(index);$router.push({path:'/application/custormPosterListAdd', query :{ class: posterActiveNum+1}})" v-bind:style="{ background: item.btcolor, border: 'none'}" size="small" type="primary">创建{{item.title}}</el-button>
                      <!-- <router-link tag="span" :to="{path:'/application/custormPosterListAdd', query :{ class: posterActiveNum+1}}">
                      </router-link> -->
                    </p>
                </div>
            </div>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
          <el-button size="small" @click="dialogVisibleImg = false">取消</el-button>
            <!-- <el-button v-if="posterActiveNum === -1" size="small" >请选择海报类型</el-button> -->
            <!-- <router-link v-if="posterActiveNum >= 0" tag="span" :to="{path:'/application/custormPosterListAdd', query :{ class: posterActiveNum+1}}">
                <el-button size="small" type="primary">下一步</el-button>
            </router-link> -->
        </footer>
    </el-dialog>
    <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
            <el-button size="small" @click="dialogVisibleImg=true" type="primary">添加海报</el-button>
        </div>
        <div class="wlm-table-header">
            <el-form :model="tableFormatData.userTable.files" size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="海报名称：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.userTable.files.posterName" placeholder="海报名称" style="width:160px;"></el-input>
                    </el-form-item>
                    <el-form-item label="海报类型：">
                        <el-select v-model="tableFormatData.userTable.files.class" placeholder="请选择" style="width:200px;">
                            <el-option label="商品海报" :value="1">
                            </el-option>
                            <el-option label="分销海报" :value="2">
                            </el-option>
                            <el-option label="秒杀海报" :value="3">
                            </el-option>
                            <el-option label="拼团海报" :value="4">
                            </el-option>
                             <!-- <el-option label="抽奖海报" :value="5">
                            </el-option> -->
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-table :ref="tableFormatData.userTable.key" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <!-- <el-table-column type="selection">
                </el-table-column> -->
                <el-table-column  label="海报名称" >
                    <template slot-scope="scope">
                        <p>{{scope.row.posterName}}</p>
                    </template>
                </el-table-column>
                <el-table-column  label="海报类型" >
                    <template slot-scope="scope">
                        <span>{{className[scope.row.class]}}</span>
                    </template>
                </el-table-column>
                <el-table-column  label="海报分类" >
                    <template slot-scope="scope">
                        <span>{{scope.row.local==1?'全局':'商品单独'}}</span>
                    </template>
                </el-table-column>
                <el-table-column  label="状态" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.state==1" class="orders-green">启用</span>
                        <span v-if="scope.row.state==2" class="orders-gray">未启用</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <div class="operation-group">
                            <el-button  class="wlm-text" type="text" @click="luckOpen(scope.row.diy_id,scope.row.state)">{{scope.row.state==2?'启用':'禁用'}}</el-button>
                            <div  class="btn-line"></div>
                            <router-link class="wlm-text" tag="span" :to="{path:'/application/custormPosterListAdd', query :{ class: scope.row.class,diy_id:scope.row.diy_id}}">
                                <el-button size="small" type="text">编辑</el-button>
                            </router-link>
                            <!-- <el-button  class="wlm-text" @click="editDialogForm(scope.row.class)" type="text">编辑</el-button> -->
                            <div class="btn-line"></div>
                            <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.diy_id)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  posterLists,
  posterDestroy,
  posterState
} from '@/api/application'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'CustormPosterList',
  components: {
  },
  computed: {
    getPath() {
      return function(path) {
        return (path.includes('https://') || path.includes('http://')) ? `${path}` : require(`@/assets/poster/${path}`)
      }
    }
  },
  data() {
    return {
      posterActiveNum: -1,
      className: {
        1: '商品海报',
        2: '分销海报',
        3: '秒杀海报',
        4: '拼团海报',
        // 5: '抽奖海报'
      },
      itemList: [{
        color: '#EFF2FF',
        btcolor: '#869BFB',
        img: 'lxi_shop.png',
        title: '商品海报',
        key: 'goods',
        des: '推广商品为目的，分享后进入商品详情页',
        active: false
      }, {
        color: '#E5F8FF',
        btcolor: '#36AEDD',
        img: 'lxi_fenxiao.png',
        title: '分销海报',
        key: 'distribution',
        des: '推广商城发展下线为目的，扫码后进入商城相关页面',
        active: false
      },
      // {
      //   color: 'rgb(255, 235, 247)',
      //   img: 'lxi_guanzhu.png',
      //   title: '关注海报',
      //   des: '推广商城、吸粉发展会员为目的，可设置奖励',
      //   active: false
      // },
      {
        color: '#FFEBEB',
        btcolor: '#FB5D8D',
        img: 'lxi_miaosha.png',
        title: '秒杀海报',
        key: 'spike',
        des: '秒杀商品专用海报，突出秒杀信息，激发用户点击欲望',
        active: false
      }, {
        color: '#FFF6E4',
        btcolor: '#F9C443',
        img: 'lxi_tuangou.png',
        title: '拼团海报',
        key: 'group',
        des: '团购商品专用海报，突出团购信息，激发用户点击欲望',
        active: false
      },
      // {
      //   color: '#FFF6E4',
      //   btcolor: '#F9C443',
      //   img: 'lxi_tuangou.png',
      //   title: '抽奖海报',
      //   key: 'marketlottery',
      //   des: '抽奖商品专用海报，突出团购信息，激发用户点击欲望',
      //   active: false
      // }
      ],
      dialogVisibleImg: false,
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: posterLists,
            delList: posterDestroy
          },
          tableData: [],
          files: {
            class: '',
            posterName: '',
            ids: [],
            checkall: '0',
            Recycle: '1'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    luckOpen(id, state) {
      this.$confirm(state == 1 ? '是否确认禁用?' : '是否确认启用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        posterState({ ids: [id] }).then(response => {
          const { data: { msg, code } } = response
          if (code === 1) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.$nextTick(() => {
              this.filesSerch()
            })
          } else {
            this.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.custorm-poster-list {
    .poster-item {
        border-radius: 10px;
        // margin-right: 30px;
        margin-top: 30px;
        margin-left: 30px;
        height: 225px;
        width: 192px;
        padding: 0 20px;
        float: left;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
        position: relative;
    }

    .poster-item:nth-of-type(2n) {
        margin-right: 0;
    }

    .poster-item .active:before {
        content: "";
        position: absolute;
        border-radius: 10px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
    }

    .poster-item .content {
        box-sizing: border-box;
        width: 80px;
        height: 80px;
        margin: 20px auto;
        animation: all .6s infinite;
    }

    .poster-item .el-icon-circle-check {
        // width: 30px;
        // height: 30px;
        display: block;
        font-size: 34px;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        margin-top: -15px;
        margin-left: -15px;
        color: #409EFF;
        z-index: 10;
    }

    .poster-item .title {
        font-size: 16px;
        color: #333;
        text-align: center;
        margin-bottom: 28px;
        line-height: 1;
    }

    .poster-item .explain {
        font-size: 12px;
        color: #999;
        line-height: 20px;
        margin-top: 6px;
    }

    .poster-item .content img {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
}
</style>
